<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flat UI Free</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="../../dist/css/vendor/bootstrap.min.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="../../dist/css/flat-ui.css" rel="stylesheet">

    <link rel="shortcut icon" href="../../dist/img/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="../../dist/js/vendor/html5shiv.js"></script>
      <script src="../../dist/js/vendor/respond.min.js"></script>
    <![endif]-->
    <style>
      body {
        padding-bottom: 200px;
      }
      ul {
        list-style: none;
        padding-left: 33px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row no-svg-elements mbl">

        <div class="col-md-12">
          <h4>Checkboxes &amp; Radio-buttons</h4>
        </div>

        <div class="col-md-6">
          <form role="form">
            <div class="form-group">
              <label class="checkbox" for="checkbox1">
                <input type="checkbox" data-toggle="checkbox" value="" id="checkbox1" required>
                Unchecked
              </label>
              <label class="checkbox" for="checkbox2">
                <input type="checkbox" data-toggle="checkbox" checked="checked" value="" id="checkbox2" checked="">
                Checked
              </label>
              <label class="checkbox" for="checkbox3">
                <input type="checkbox" data-toggle="checkbox" value="" id="checkbox3" disabled="">
                Disabled unchecked
              </label>
              <label class="checkbox" for="checkbox4">
                <input type="checkbox" data-toggle="checkbox" checked="checked" value="" id="checkbox4" disabled="" checked="">
                Disabled checked
              </label>
            </div>
            <button type="submit" class="btn btn-sm btn-primary">Submit</button>
          </form>
        </div>
        <div class="col-md-6">
         <form role="form">
           <div class="form-group">
             <label class="radio">
                <input type="radio" data-toggle="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-radiocheck-toggle="radio" required>
                Radio is off
              </label>
              <label class="radio">
                <input type="radio" data-toggle="radio" name="optionsRadios" id="optionsRadios2" value="option1" data-radiocheck-toggle="radio" checked="">
                Radio is on
              </label>

              <label class="radio">
                <input type="radio" data-toggle="radio" name="optionsRadiosDisabled" id="optionsRadios3" value="option2" data-radiocheck-toggle="radio" disabled="">
                Disabled radio is off
              </label>
              <label class="radio">
                <input type="radio" data-toggle="radio" name="optionsRadiosDisabled" id="optionsRadios4" value="option2" data-radiocheck-toggle="radio" checked="" disabled="">
                Disabled radio is on
              </label>
            </div>
            <button type="submit" class="btn btn-sm btn-primary">Submit</button>
          </form>
        </div>
      </div><!-- /.row -->
      <div class="row mbl">

        <div class="col-md-12">
          <h4>Custom colour</h4>
        </div>
        <div class="col-md-6">
          <form role="form">
            <div class="form-group">
              <label class="checkbox primary" for="checkbox1c">
                <input type="checkbox" data-toggle="radio" value="" id="checkbox1c" required>
                Unchecked
              </label>
              <label class="checkbox primary" for="checkbox2c">
                <input type="checkbox" data-toggle="radio" checked="checked" value="" id="checkbox2c" checked="">
                Checked
              </label>
              <label class="checkbox primary" for="checkbox3c">
                <input type="checkbox" data-toggle="radio" value="" id="checkbox3c" disabled="">
                Disabled unchecked
              </label>
              <label class="checkbox primary" for="checkbox4c">
                <input type="checkbox" data-toggle="radio" checked="checked" value="" id="checkbox4c" disabled="" checked="">
                Disabled checked
              </label>
            </div>
            <button type="submit" class="btn btn-sm btn-primary">Submit</button>
          </form>
        </div>
        <div class="col-md-6">
         <form role="form">
           <div class="form-group">
             <label class="radio primary">
                <input type="radio" data-toggle="radio" name="optionsRadios" id="optionsRadios1c" value="option1" data-radiocheck-toggle="radio" required>
                Radio is off
              </label>
              <label class="radio primary">
                <input type="radio" data-toggle="radio" name="optionsRadios" id="optionsRadios2c" value="option1" data-radiocheck-toggle="radio">
                Radio is on
              </label>

              <label class="radio primary">
                <input type="radio" data-toggle="radio" name="optionsRadiosDisabled" id="optionsRadios3c" value="option2" data-radiocheck-toggle="radio" disabled="">
                Disabled radio is off
              </label>
              <label class="radio primary">
                <input type="radio" data-toggle="radio" name="optionsRadiosDisabled" id="optionsRadios4c" value="option2" data-radiocheck-toggle="radio" checked="" disabled="">
                Disabled radio is on
              </label>
            </div>
            <button type="submit" class="btn btn-sm btn-primary">Submit</button>
          </form>
        </div>

      </div><!-- /.row -->
      <div class="row mbl">
        <div class="col-md-12">
          <h4>Plugin methods</h4>
        </div>
        <div class="col-md-12">
          <form role="form">
            <div class="form-group">
              <label class="checkbox" for="checkbox100">
                <input type="checkbox" data-toggle="radio" value="" id="checkbox100" required>
                Checkbox
              </label>
            </div>
            <button type="submit" class="btn btn-sm btn-primary">Submit</button>&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="btn btn-sm btn-default" data-radiocheck-check="#checkbox100">Check</button>
            <button class="btn btn-sm btn-default" data-radiocheck-uncheck="#checkbox100">Uncheck</button>
            <button class="btn btn-sm btn-default" data-radiocheck-toggle="#checkbox100">Toggle</button>&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="btn btn-sm btn-default" data-radiocheck-indeterminate="#checkbox100">Indeterminate</button>
            <button class="btn btn-sm btn-default" data-radiocheck-determinate="#checkbox100">Determinate</button>&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="btn btn-sm btn-default" data-radiocheck-disable="#checkbox100">Disable</button>
            <button class="btn btn-sm btn-default" data-radiocheck-enable="#checkbox100">Enable</button>&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="btn btn-sm btn-default" data-radiocheck-destroy="#checkbox100">Destroy</button>
            <button class="btn btn-sm btn-default" data-radiocheck-init="#checkbox100">Init</button><br><br>
          </form>
        </div>
      </div><!-- /.row -->

      <div class="row mbl">
        <div class="col-md-12">
          <form role="form">
            <div class="form-group">
              <label class="radio" for="radio100">
                <input name="optionsRadios2" type="radio" data-toggle="radio" value="" id="radio100" required>
                Radio
              </label>
              <label class="radio" for="radio101">
                <input name="optionsRadios2" type="radio" data-toggle="radio" value="" id="radio101" required checked>
                Radio
              </label>
            </div>
            <button type="submit" class="btn btn-sm btn-primary">Submit</button>&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="btn btn-sm btn-default" data-radiocheck-check="#radio100">Check</button>
            <button class="btn btn-sm btn-default" data-radiocheck-uncheck="#radio100">Uncheck</button>
            <button class="btn btn-sm btn-default" data-radiocheck-toggle="#radio100">Toggle</button>&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="btn btn-sm btn-default" data-radiocheck-disable="#radio100">Disable</button>
            <button class="btn btn-sm btn-default" data-radiocheck-enable="#radio100">Enable</button>&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="btn btn-sm btn-default" data-radiocheck-destroy="#radio100">Destroy</button>
            <button class="btn btn-sm btn-default" data-radiocheck-init="#radio100">Init</button><br><br>
          </form>
        </div>
      </div><!-- /.row -->
    </div><!-- /.container -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="../../dist/js/vendor/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../../dist/js/flat-ui.min.js"></script>

    <script src="../assets/js/application.js"></script>
    <script>
      $('button:not([type="submit"])').on('click', function (e) {
        var $this = $(this);

        if (!!$this.attr('data-radiocheck-check')) {
          var el = $this.attr('data-radiocheck-check');
          $(el).radiocheck('check');
        } else if (!!$this.attr('data-radiocheck-uncheck')) {
          var el = $this.attr('data-radiocheck-uncheck');
          $(el).radiocheck('uncheck');
        } else if (!!$this.attr('data-radiocheck-toggle')) {
          var el = $this.attr('data-radiocheck-toggle');
          $(el).radiocheck('toggle');
        } else if (!!$this.attr('data-radiocheck-indeterminate')) {
          var el = $this.attr('data-radiocheck-indeterminate');
          $(el).radiocheck('indeterminate');
        } else if (!!$this.attr('data-radiocheck-determinate')) {
          var el = $this.attr('data-radiocheck-determinate');
          $(el).radiocheck('determinate');
        } else if (!!$this.attr('data-radiocheck-disable')) {
          var el = $this.attr('data-radiocheck-disable');
          $(el).radiocheck('disable');
        } else if (!!$this.attr('data-radiocheck-enable')) {
          var el = $this.attr('data-radiocheck-enable');
          $(el).radiocheck('enable');
        } else if (!!$this.attr('data-radiocheck-destroy')) {
          var el = $this.attr('data-radiocheck-destroy');
          $(el).radiocheck('destroy');
        } else if (!!$this.attr('data-radiocheck-init')) {
          var el = $this.attr('data-radiocheck-init');
          $(el).radiocheck();
        }

        e.preventDefault();
      });

    </script>

  </body>
</html>
